<template>
    <div>
        <div class="layout-content-breadcrumb">
            <Breadcrumb>
                <Breadcrumb-item>资讯管理</Breadcrumb-item>
                <Breadcrumb-item>资讯分类列表</Breadcrumb-item>
            </Breadcrumb>
        </div>
        <div class="page-content">
            <Button type="primary" @click="onAdd">新增分类</Button>
            <Table :columns="columns" :data="dataSource"></Table>
            <div class="table-paging">
                <Page :total="totalNumber" :current="page" :page-size="pageSize" show-total @on-change="onPageChange"></Page>
            </div>
        </div>
        <Modal
                v-model="updateModal.showModal"
                title="修改分类名"
                @on-ok="onSureUpdate">
            <Input v-model="updateModal.title" placeholder="请输入新分类名" size="large">
            </Input>
        </Modal>
        <Modal
                v-model="addModal.showModal"
                title="新增分类"
                @on-ok="onSureAdd">
            <Input v-model="addModal.title" placeholder="请输入分类名" size="large">
            </Input>
        </Modal>
    </div>
</template>
<style lang="less">

</style>
<script>
    import api from 'service/information'
    export default{
        data(){
            return {
                page:1,
                pageSize:10,
                totalNumber: 0,
                addModal:{
                    showModal:false,
                    title:''
                },
                updateModal:{
                    showModal:false,
                    id:'',
                    title:''
                },
                columns: [
                    {
                        title: '类别名',
                        key: 'title'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style:{
                                        marginRight:'5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.onUpdateCategory(params.row)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.onDelCategory(params.row)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                dataSource: []
            }
        },
        mounted(){
            this.onPageChange(1)
        },
        methods:{
            onPageChange(page){
                this.page=page
                api.getCategoryList({
                    page: page,
                    per_page: this.pageSize
                }).then(({data}) => {
                    this.dataSource = (data.list || [])
                    this.totalNumber = Number(data.total_count)
                })
            },
            onAdd(){
                this.addModal.showModal=true
                this.addModal.title=''
            },
            onSureAdd(){
                let title=this.addModal.title.trim()
                if(!title){
                    return this.$Message.warning('分类名不能为空！')
                }
                api.addCategory({
                    title:title
                }).then(()=>{
                    this.addModal.showModal=false
                    this.$Message.success('新增成功！')
                    this.onPageChange(1)
                })
            },
            onUpdateCategory(row){
                this.updateModal.showModal=true
                this.updateModal.id=row.id
                this.updateModal.title=row.title
            },
            onSureUpdate(){
                let title=this.updateModal.title.trim()
                if(!title){
                    return this.$Message.warning('分类名不能为空！')
                }
                api.updateCategory({
                    id:this.updateModal.id,
                    title:title
                }).then(()=>{
                    this.updateModal.showModal=false
                    this.$Message.success('更新成功！')
                    this.onPageChange(this.page)
                })
            },
            onDelCategory(row){
                let that=this
                this.$Modal.confirm({
                    title:'删除',
                    content:`确定删除吗？`,
                    onOk(){
                        api.updateCategory({id:row.id,deleted:1})
                            .then(()=>{
                                that.$Message.success('删除成功！')
                                that.onPageChange(that.page)
                            })
                    }
                })
            }
        }
    }
</script>
